@import "[default].parameters.css";

.rotator {
    position: relative;
    height: 2em;
    overflow: hidden;
    font-size: var(--text-heading-1);
    font-weight: 900;
    line-height: 11.6rem;
}

.word {
    position: absolute;
    color: var(--color-green-600);
    font-weight: var(--font-weight-bolder);
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateY(100%);
    animation: rotateUp 12s infinite;
    animation-delay: calc(var(--i) * (12s / var(--total)));
}

@keyframes rotateUp {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    5% {
        opacity: 1;
        transform: translateY(0);
    }

    25% {
        opacity: 1;
        transform: translateY(0);
    }

    30% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}